<template>
  <div class="topBox">
    <div class="top">
      <div class="top-1">
        <p style="margin-top: 10px; margin-left: 10px">订单量(件)</p>
        <span class="top-1-number">32149</span>
        <div style="display: flex; width: 260px">
          <p style="font-size: 20px; color: green; margin-left: 30%">+0.3%</p>
          <span style="font-size: 20px; color: gray">较昨日</span>
        </div>
      </div>
    </div>
    <div class="top">
      <div class="top-1">
        <p style="margin-top: 10px; margin-left: 10px">待付款订单(件)</p>
        <span class="top-1-number">624</span>
        <div style="display: flex; width: 260px">
          <p style="font-size: 20px; color: green; margin-left: 30%">+0.3%</p>
          <span style="font-size: 20px; color: gray">较昨日</span>
        </div>
      </div>
    </div>
    <div class="top">
      <div class="top-1">
        <p style="margin-top: 10px; margin-left: 10px">客单价(元)</p>
        <span class="top-1-number">1986</span>
        <div style="display: flex; width: 260px">
          <p style="font-size: 20px; color: green; margin-left: 30%">+0.3%</p>
          <span style="font-size: 20px; color: gray">较昨日</span>
        </div>
      </div>
    </div>
    <div class="top">
      <div class="top-1">
        <p style="margin-top: 10px; margin-left: 10px">浏览量</p>
        <span class="top-1-number">50988</span>
        <div style="display: flex; width: 260px">
          <p style="font-size: 20px; color: green; margin-left: 30%">+0.3%</p>
          <span style="font-size: 20px; color: gray">较昨日</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bottomBox">
    <div class="bottom" id="box1">成交统计(万元)</div>
    <div class="bottom-right1" id="box2">库存(件)</div>
    <div class="bottom-right2" id="box3">品牌销售占比</div>
    <div class="bottom" id="box4">产品销量排行(件)</div>
    <div class="bottom-right5" id="box5">一周用户增长趋势(人)</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
export default {
  setup() {
    // 图表引入到生命周期onMounted中
    // 成交统计-图表
    onMounted(() => {
      const box1 = document.getElementById("box1");
      if (box1) {
        var myChart = echarts.init(box1);
        var option;

        option = {
          title: {
            text: "成交统计（万元）",
          },
          tooltip: {
            //鼠标滑过有数据
            trigger: "axis",
          },
          grid: {
            bottom: "8%",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["00", "03", "06", "09", "12", "15", "18", "21", "24"],
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 80,
            splitNumber: 4,
          },
          legend: {
            //顶上两块
            data: ["今天", "昨天"],
          },
          series: [
            {
              name: "今天",
              smooth: true, //直线变成曲线
              type: "line",
              color: "blue",
              // stack: 'Total', //堆叠
              data: [33, 39.6, 38.5, 36, 38, 62.5, 56, 63, 63.8],
            },
            {
              name: " 昨天",
              type: "line",
              smooth: true, //直线变成曲线
              // stack: 'Total',
              color: "yellow",
              data: [29, 32, 31, 36, 35, 43, 38, 40, 50],
            },
          ],
        };
        option && myChart.setOption(option);
      }
    });
    //库存-图表
    onMounted(() => {
      const box2 = document.getElementById("box2");
      var myChart = echarts.init(box2);
      var option;

      const data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }
      option = {
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: data,
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };
      function run() {
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
          } else {
            data[i] += Math.round(Math.random() * 200);
          }
        }
        myChart.setOption({
          series: [
            {
              type: "bar",
              data,
            },
          ],
        });
      }
      setTimeout(function () {
        run();
      }, 0);
      setInterval(function () {
        run();
      }, 3000);

      option && myChart.setOption(option);

      option && myChart.setOption(option);
    });
    // 品牌销售占比-图表
    onMounted(() => {
      const box3 = document.getElementById("box3");
      var myChart = echarts.init(box3);
      var option;

      option = {
        title: {
          text: "品牌销售占比",
          top: 10,
        },
        legend: {
          top: 100,
          orient: "vertical",
          right: "right",
          itemGap: 2,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: [40, 90],
            center: ["40%", "55%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },

            data: [
              { value: 860, name: "紫川" },
              { value: 550, name: "爱尚鲜花" },
              { value: 400, name: "花加" },
              { value: 484, name: "春舞枝" },
              { value: 400, name: "花礼网" },
              { value: 300, name: "宜花" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    });
    // 产品销量排行-图表
    onMounted(() => {
      const box4 = document.getElementById("box4");
      var myChart = echarts.init(box4);
      var option;

      option = {
        title: {
          text: "产品销量排行（件）",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "康乃馨",
              "非洲菊",
              "洋甘菊",
              "睡莲",
              "茉莉",
              "玫瑰",
              "向日葵",
              "绣球",
              "芍药",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 40000,
            splitNumber: 4,
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [30000, 18000, 10000, 28000, 18500, 28000, 20000, 22000],
          },
        ],
      };

      option && myChart.setOption(option);
    });

    // 一周用户增长趋势-图表
    onMounted(() => {
      const box5 = document.getElementById("box5");
      var myChart = echarts.init(box5);
      var option;

      option = {
        title: {
          text: "一周用户增长趋势（人）",
        },
        tooltip: {
          //鼠标滑过有数据
          trigger: "axis",
        },
        grid: {
          bottom: "8%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["01", "02", "03", "04", "05", "06", "07"],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 40000,
          splitNumber: 4,
        },
        series: [
          {
            name: "人数",
            smooth: true, //直线变成曲线
            type: "line",
            color: "blue",
            // stack: 'Total', //堆叠
            data: [20000, 23000, 25000, 26000, 32000, 29600, 31500],
          },
        ],
      };

      option && myChart.setOption(option);
    });
  },
};
</script>

<style lang="less" scoped>
.topBox {
  display: flex;
}
.top {
  width: 300px;
  height: 150px;
  border: 1px solid #cccccc;
  display: flex;
  margin-right: 10px;
  border-radius: 5px;
}
.top-1 {
  direction: column;
}
.top-1-number {
  font-size: 50px;
  margin-left: 25%;
}
.bottomBox {
  display: flex;
  flex-wrap: wrap;
}
.bottom {
  width: 610px;
  height: 300px;
  border: 1px solid #cccccc;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
.bottom-right1 {
  width: 300px;
  height: 300px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  margin-right: 10px;
  margin-top: 10px;
}
.bottom-right2 {
  width: 300px;
  height: 300px;
  border-radius: 5px;
  margin-top: 10px;
  border: 1px solid #cccccc;
}
.bottom-right5 {
  width: 609px;
  height: 300px;
  border: 1px solid #cccccc;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
</style>
